<script setup lang="ts">
import { h, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { NCard,NButton,NFlex ,NDropdown} from 'naive-ui'
import SvgIcon from '@/components/SvgIcon.vue'

const router = useRouter()
//接收props
const props = defineProps({
  title: {
    type: String,
    default: '应用的名称' // 默认值
  },
  icon: {
    type: String,
    default: 'close' // 默认值
  }
})
/**
 * 头图标名称设置
 * 头标下拉菜单设置
 */
const options_ai = [
  { label: '关闭', key: '关闭' },

]
const handleSelect = (key: string) => {
  console.log(key)
  handleClose()
}


let renderIcon = () => {
  return  h(NFlex, () => [ h(NDropdown,{trigger:"hover",size:"huge",showArrow:true,options:options_ai,onSelect:handleSelect},()=> h(NButton,{text:true,style:'font-size: 24px'},()=>h(SvgIcon, { iconClass: props.icon}))),h('div',  props.title )])
}
const headerTitel = () => renderIcon()


/**
 * 关闭事件,返回路由上一页
 */
const handleClose = () => {
  console.log('关闭不了这个应用')
  router.go(-1)
}

</script>

<template>
  <n-card :title="headerTitel" style="height: 100%;" closable @close="handleClose">
     
    <template #header-extra>
      <slot name="header-extra"></slot>
    </template>
    <template #default>
      <!-- <div>在插槽上面</div> -->
      <slot></slot>
      <n-flex>
        <!-- <div>在插槽下面</div> -->
      </n-flex>
    </template>
  
    <template #footer>
      <slot name="footer"></slot>
    </template>
    <template #action>
      <slot name="action"></slot>
    </template>
  </n-card>
</template>

<style>
.n-card>.n-card__action {
  height: 100px;
  padding: 8px;
}
</style>
